import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { ListView } from 'antd-mobile';
import AlbumItem from '../components/AlbumItem';
import { getRankAlbumPage, getDeviceId, setDocumentTitle } from '../utils.js';

// 主界面专辑列表
class RankAlbum extends Component {

    constructor(props, context) {
        super(props, context);
        const ds = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });

        this.albumItemClick = this.albumItemClick.bind(this);

        this.state = {
            albums: [],
            play_rate: -1,
            dataSource: ds.cloneWithRows([]),
            height: document.documentElement.clientHeight * 3, // 高度
            isLoading: true,
            hasMore: true,
        };
    }

    componentDidMount() {
        this._isMounted = true;
        let hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
        this.setState({
            height: hei,
        });
        this.fetch();
        setDocumentTitle('热门排行');
        
    }

    fetch() {
        getRankAlbumPage(this.state.play_rate, (function (data) {
            if (!this._isMounted) {
                return;
            }
            if (data.errcode === 0) {
                let len = data.data.length
                if (len > 0) {
                    let albums = this.state.albums.concat(data.data)
                    this.setState({
                        albums: albums
                    });
                    let hasMore = (len === 20);
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRows(albums),
                        hasMore: hasMore,
                        isLoading: false,
                        play_rate: data.data[len - 1].play_rate,
                    });

                } else {
                    this.setState({ isLoading: false, hasMore: false });
                }
            } else {
                this.setState({ isLoading: false, });
            }
        }).bind(this));
    }

    
    componentWillUnmount() {
        this._isMounted = false;
    }


    albumItemClick(album) {
        this.props.history.push({
            pathname: '/album',
            device_id: getDeviceId(),
            album: album
        });
    }



    onEndReached = (event) => {
        if (this.state.isLoading === true
            && this.state.hasMore === false) {
            return;
        }
        this.setState({ isLoading: true });
        this.fetch();
    }

    render() {
        const row = (rowData, sectionID, rowID) => {
            return (
                <AlbumItem key={rowID} album={rowData} albumItemClick={this.albumItemClick} />
            );
        };
        return (
            <div>
                <ListView
                    ref={el => this.lv = el}
                    dataSource={this.state.dataSource}
                    renderFooter={() => (
                        <div style={{
                            padding: 16,
                            textAlign: 'center',
                            fontSize: '13px',
                        }}>
                            {this.state.hasMore === true ? "正在加载内容..." : '没有更多内容了~'}
                        </div>)}
                    renderRow={row}
                    style={{
                        height: this.state.height,
                        overflow: 'auto',
                    }}
                    initialListSize={20}
                    pageSize={20}
                    className="am-list"
                    onScroll={this.onScroll}
                    scrollEventThrottle={100}
                    scrollRenderAheadDistance={300}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={20}
                />
            </div>
        );
    }
}
export default RankAlbum;
